<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">财务</BreadcrumbItem>
                <BreadcrumbItem href="#">余额管理</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <Row>
                <Col span="24">
                <span>客户名称：</span>
                <Input v-model="search.company" size="large" placeholder="请填写客户名称" style="width:200px;"></Input>
                <Button style="margin-left:20px;" type="primary" size="large" @click="goSearch">查询</Button>
                <div class="money" style="float:right;">
                    <Button type="primary" size="large" @click="allocat">分配余额</Button>
                </div>
                </Col>
            </Row>
        </Card>
        <Card style="margin-top:20px;">
            <div class="layout-content clearfix">
                <div class="layout-content-main">
                    <Table stripe :columns="columns" :data="data"></Table>
                    <div class="page-wrapper">
                        <Page :current="page.current" :total="page.total" :page-size="page.size" show-total @on-change="changeCur" @on-poge-size-change="changeSize"></Page>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                search: {
                    company: ''
                },
                data: [],
                page: {
                    current: 1,
                    total: 100,
                    size: 50
                },
                columns: [{
                        title: '客户名称',
                        key: 'org_name',
                        align: 'center'
                    },
                    {
                        title: '联系人姓名',
                        key: 'user_name',
                        align: 'center'
                    },
                    {
                        title: '手机号码',
                        key: 'user_phone',
                        align: 'center'
                    },
                    {
                        title: '账户余额（元）',
                        key: 'amount',
                        sortable: 'true',
                        align: 'center'
                    },
                    {
                        title: '当日消耗',
                        key: 'consume',
                        align: 'center'
                    }
                ]
            }
        },
        mounted() {
            this._loadData();
        },
        methods: {
            _loadData() {
                let vm = this;
                let params = {
                    type: 'get',
                    url: 'finance/memberBalance',
                    params: {
                        page: vm.page.current,
                        size: vm.page.size,
                        company: vm.search.company
                    },
                    sCallback(data) {
                        vm.page.current = Number(data.data.current_page);
                        vm.page.total = Number(data.data.total);
                        vm.page.size = Number(data.data.per_page);
                        vm.data = data.data.data;
                    },
                    eCallbakc(e) {
                        console.log(e);
                    }
                };
                this.http.request(params);
            },
            goSearch() {
                this._loadData();
            },
            changeCur() {
                console.log('changeCur')
            },
            changeSize() {
                console.log('changesize')
            },
            allocat() {
                this.$router.push({
                    path: '/home/finance/allocation'
                })
            }
        }
    }
</script>

<style>

</style>
